<template>
  <div class="search">
    <!-- 标题 -->
    <van-nav-bar
      class="title"
      title="面试技巧搜索"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 搜索 -->
    <van-search
      v-model="value"
      shape="round"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
    />
    <div class="line"></div>
    <!-- 搜索提示 -->
    <div class="hint" v-if="value.length === 0">
      <div class="item">
        <div class="hot">大家都在搜索</div>
        <span
          v-for="(item, index) in hotSrarch"
          :key="index"
          @click="value = item"
          >{{ item }}</span
        >
      </div>
      <div class="item">
        <div class="history">
          历史记录
          <div class="flex"></div>
          <div class="clear" @click="clear">清空</div>
        </div>
        <span
          v-for="(item, index) in history"
          :key="index"
          @click="value = item"
          >{{ item }}</span
        >
      </div>
    </div>
    <!-- 搜索结果 -->
    <div class="result" v-if="value.length">
      <van-list
        class="main"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- v-for="item in list" :key="item" :title="item" -->
        <van-cell v-for="(item, index) in interviewList" :key="index">
          <!-- item -->
          <div
            class="item"
            @click="$router.push('/interviewDetail/' + item.id)"
          >
            <div class="content">
              <p v-html="item.title"></p>
              <div class="info">
                <div class="time">
                  <span>{{ item.created_at | dateStyleOne }}</span>
                </div>
                <div class="flex"></div>
                <div class="right">
                  <van-icon name="eye-o" />
                  <span>{{ item.read }}</span>
                  <van-icon
                    name="good-job-o"
                    :class="{ red: starArtList.includes(item.id) }"
                  />
                  <span>{{ item.star }}</span>
                </div>
              </div>
            </div>
            <img :src="baseUrl + item.cover" alt="" />
          </div>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
// 导入数据操作
import { getLocal, setLocal, removeLocal } from '@/utils/local.js'
// 导入api
import { apiInterviewingSreach, apiInterviewingList } from '@/api/find.js'
export default {
  data () {
    return {
      baseUrl: process.env.VUE_APP_URL, // 基础地址
      value: '', // 搜索值
      hotSrarch: [], // 热搜
      history: [], // 历史记录
      interviewList: [], // 文章数据
      // 刷新数据
      loading: false,
      finished: false,
      // 请求参数
      star: 0,
      limit: 5,
      // 防抖时间
      time: null,
      // 用户点赞列表
      starArtList: []
    }
  },
  watch: {
    value () {
      this.interviewList = []
      this.start = 0
      this.finished = false
      this.onLoad()
    }
  },
  mounted () {
    // 请求热搜记录
    apiInterviewingSreach().then(res => {
      this.hotSrarch = res.data
    })
    // 历史搜索
    const his = getLocal('technic')
    if (his) {
      this.history = his
    }
    // 获取用户点赞列表
    if (this.$store.state.userInfo.starArticles) {
      this.starArtList = this.$store.state.userInfo.starArticles
    }
  },
  methods: {
    onLoad () {
      this.mytime()
    },
    async onSearch () {
      if (this.value) {
        // 1.保存历史
        // 历史去重
        this.history = this.history.filter(item => {
          return item !== this.value
        })
        // 保存
        this.history.unshift(this.value)
        // 历史长度限制
        if (this.history.length > 6) {
          this.history.length = 6
        }
        setLocal(this.history, 'technic')
        // 2.请求接口
        const res = await apiInterviewingList({
          start: this.start,
          limit: this.limit,
          q: this.value
        })
        const newarr = res.data.list.map(item => {
          item.title = item.title.replace(
            this.value,
            "<span class='red'>" + this.value + '</span>'
          )
          return item
        })
        this.interviewList = [...this.interviewList, ...newarr] // 更新数据
        // 终点判断
        if (res.data.list.length < this.limit) {
          this.finished = true
        }
        // 页码+1
        this.start += this.limit
        // 停止加载
        this.loading = false
      }
    },
    mytime () {
      clearTimeout(this.time)
      this.time = setTimeout(() => {
        this.onSearch()
      }, 500)
    },
    // 清空历史
    clear () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '确定删除历史记录吗?'
        })
        .then(() => {
          this.history = []
          removeLocal('technic')
        })
    }
  }
}
</script>

<style lang="less" scoped>
.search {
  /deep/ .red {
    color: red !important;
  }
  /* 标题 */
  .title {
    background-color: #ca0131;
    /deep/.van-nav-bar__title {
      color: #fff;
    }
    /deep/ .van-icon {
      color: #fff;
    }
  }
  /* 搜索 */
  /deep/ .van-search {
    margin-bottom: 10px;
  }
  .line {
    height: 2px;
    background-color: #f7f8fa;
  }
  /* 搜索提示 */
  .hint {
    padding: 0 15px;
    .item {
      padding-bottom: 30px;
      .hot,
      .history {
        font-size: 16px;
        margin: 20px 0;
        display: flex;
        .flex {
          flex: 1;
        }
        .clear {
          font-size: 12px;
        }
      }
      span {
        display: inline-block;
        white-space: nowrap;
        font-size: 14px;
        padding: 8px 7px;
        margin: 8px 15px;
        margin-left: 0;
        background-color: #eceaea;
        border-radius: 8px;
      }
    }
  }
  /* 搜索结果 */
  .result {
    .info {
      display: flex;
      height: 20px;
      .flex {
        flex: 1;
      }
      .van-icon {
        line-height: 20px;
        font-size: 14px;
      }
      span {
        vertical-align: middle;
        line-height: 20px;
        font-size: 12px;
        padding: 0 7px;
      }
    }
    .item {
      display: flex;
      align-items: center;
      height: 125px;
      padding-top: 10px;
      padding-bottom: 25px;
      .content {
        height: 100%;
        width: 65%;
        padding-right: 10px;
        p {
          margin: 0;
          height: 70px;
          font-size: 16px;
        }
      }
      img {
        width: 35%;
        height: 90px;
      }
    }
  }
}
</style>
